<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="icon" href="./favicon.ico"/>
  <title>九鸟软件科技有限公司</title>
  <link rel="stylesheet" href="./libs/uikit/css/uikit.min.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_938989_wfn8mzlz6t.css">
  <link rel="stylesheet" href="./css/animate.css">
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/head.css"/>
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<div id="app">
  <!-- 导航菜单 -->
  <div class="headers">
    <header class="header">
      <div class="clearfix">
        <div class="fl left">
          <a href="javascript:void(0)"><img src="image/logo.png" alt="" class="img1"/></a>
        </div>
        <div class="fr nav">
          <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
            <li><a href="./index.html" class="active">首页</a></li>
            <li class="dropdown">
              <a href="./solution.html">解决方案 <span class="iconfont icon-bottom"></span></a>
              <div class="dropdown_menu">
                <a href="./solution-shop.html">分销商城</a>
                <a href="./solution-zxj.html">智慧物业</a>
              </div>
            </li>
            <li><a href="./examples.html">应用案例</a></li>
            <li><a href="./orders.html">定制服务</a></li>
            <li><a href="./about.html">关于我们</a></li>
          </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
          <span></span>
        </a>
      </div>
    </header>
    <div class="m_nav">
      <div class="top clearfix">
        <img src="image/closed.png" alt="" class="closed"/>
      </div>
      <div class="logo">
        <img src="image/logo2.png" alt=""/>
      </div>
      <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li><a href="./index.html" class="active">首页</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)">解决方案 <span class="iconfont icon-bottom fr"></span> </a>
          <div class="dropdown_menu">
            <a href="./solution.html">方案预览</a>
            <a href="./solution-shop.html">分销商城</a>
            <a href="./solution-zxj.html">智慧物业</a>
          </div>
        </li>
        <li><a href="./examples.html">应用案例</a></li>
        <li><a href="./orders.html">定制服务</a></li>
        <li><a href="./about.html">关于我们</a></li>
      </ul>
    </div>
  </div>

  <!-- 轮播图 -->
  <div class="banner">
    <!--<img src="./image/home_banner.png" alt="九鸟banner">-->
    <div class="banner-desc">
      <!--<p class="desc-big animated fadeIn">一站式互联网信息化服务专家</p>-->
      <!--<p class="desc-small animated fadeIn">pc网站、移动网站、微信小程序、app，四网合一</p>-->
      <div class="banner-desc-img"><img src="./image/index_banner_01.png" alt=""></div>
      <div class="banner-handles">
        <a class="handle-item" href="###">产品服务</a>
        <a class="handle-item" href="###">咨询客服</a>
      </div>
    </div>
  </div>

  <!-- 关于我们 -->
  <div class="about-us wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-1-2@m about-pic">
          <img src="./image/about_pic.png" alt="">
        </div>
        <div class="uk-width-1-2@m about-infos">
          <h1 class="about-title">ABOUT US</h1>
          <h1 class="tech-name">上海九鸟软件科技有限公司</h1>
          <h2 class="tech-name-en">SHANGHAI NINE BIRDS SOFTWARE TECHNOLOGY CO., LTD.</h2>
          <p class="tech-desc">{{aboutMsg}}</p>
          <ul class="uk-grid uk-child-width-1-3 info-list">
            <li v-for="(item,index) in aboutList" :key="index" class="info-item"
                v-bind:class="item.active == 1?'uk-card-default uk-card-hover info-item-active':''"
                @mouseover="aboutOver(index)">
              <span class="item-ic iconfont" :class="item.icon"></span>
              <p class="item-name">{{item.nameZh}}</p>
              <p class="item-name-en">{{item.nameEn}}</p>
              <p class="item-slide"></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 服务 -->
  <div class="item-padding service wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title">
        <p class="title-en">OUR SERVICE</p>
        <p class="title-zh">我们的服务</p>
        <p class="divider"></p>
      </div>
      <div class="service-container">
        <div class="uk-grid uk-child-width-1-2@l">
          <div class="service-list" v-for="(item,index) in serviceList" :key="index">
            <div class="uk-grid uk-child-width-1-2 uk-child-width-1-4@l">
              <div class="service-item" v-for="(cell,cellIndex) in item" :key="cellIndex">
                <span class="iconfont" :class="cell.icon"></span>
                <p class="item-title">{{cell.title}}</p>
                <p class="item-desc" v-for="(desc,descIndex) in cell.desc" :key="descIndex">{{desc}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 我们的优势 -->
  <div class="item-padding advantage wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title">
        <p class="title-en">OUR ADVANTAGE</p>
        <p class="title-zh">我们的优势</p>
        <p class="divider"></p>
      </div>
      <div class="uk-grid advantage-container">
        <div class="uk-width-1-2@m advantage-pic">
          <img src="./image/advantage_pic.png" alt="">
        </div>
        <div class="uk-width-1-2@m advantage-list">
          <ul>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>10年建站经验</h1>
              <p class="item-desc">丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。</p>
            </li>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>300+客户选择</h1>
              <p class="item-desc"> 300+客户选择与我们合作，告诉您选择我们是一个正确的选择。</p>
            </li>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>24小时售后支持</h1>
              <p class="item-desc">提供24小时售后支持，为您保驾护航，不用担心出现问题无法解决。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 解决方案 -->
  <div class="item-padding service solution wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title">
        <p class="title-en">Solution</p>
        <p class="title-zh">解决方案</p>
        <p class="divider"></p>
      </div>
      <div class="service-container solution-container">
        <div class="uk-grid uk-child-width-1-3@m">
          <div class="solution-item" v-for="(item,index) in 6" :key="index">
            <a href="###">
              <div class="solution-img img-scale">
                <img src="./image/solution_item.png" alt="解决方案">
              </div>
              <!--<h2 class="solution-name">九鸟商城</h2>-->
              <!--<h2 class="solution-web">http://www.jiuniao.com</h2>-->
            </a>
          </div>
        </div>
      </div>
      <a class="index-exapmle-more" href="./examples.html">查看更多方案</a>
    </div>
  </div>

  <!--尾部-->
  <div class="footer wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-1-3@m">
          <h1 class="footer-name">上海九鸟软件有限公司</h1>
          <p class="footer-contact-item"><span class="iconfont icon-weibiaoti-"></span>电话：18862486210</p>
          <p class="footer-contact-item"><span class="iconfont icon-youxiang-"></span>地址：昆山市和丰路108号太平洋商业广场1233室</p>
          <p class="footer-contact-item"><span class="iconfont icon-dizhi"></span>邮箱：105498540@qq.com</p>
        </div>
        <div class="uk-width-2-3@m sub-info">
          <div class="uk-grid uk-child-width-1-3@m">
            <div class="input-item"><input type="text" placeholder="姓名"></div>
            <div class="input-item"><input type="text" placeholder="邮箱"></div>
            <div class="input-item"><input type="text" placeholder="电话"></div>
          </div>
          <div class="sub-desc"><textarea placeholder="内容"></textarea></div>
          <button class="uk-button uk-button-primary btn-sub">提交</button>
        </div>
      </div>
    </div>
  </div>

  <!--底部地图-->
  <div class="footer-map wow fadeInUp">
    <div class="uk-container">
      <a class="map-item map-item-active" href="index.html">首页 </a>|
      <a class="map-item" href="solution.html"> 解决方案 </a>|
      <a class="map-item" href="examples.html"> 应用案例 </a>|
      <a class="map-item" href="orders.html"> 定制服务 </a>|
      <a class="map-item" href="about.html"> 关于我们 </a>
    </div>
    <p class="copy-right"><span class="comp-name">上海九鸟软件有限公司</span> 备案号:沪ICP备xxxxx号</p>
  </div>

  <!--返回顶部-->
  <span id="toTop" class="iconfont icon-fanhuidingbu to-top hide"></span>
</div>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="./libs/wow.min.js"></script>
<script src="./libs/uikit/js/uikit.min.js"></script>
<script src="./js/header.js"></script>
<script src="./datas/index.js"></script>
</body>
</html>